<template>
    <div>
        <div class="index">
            <div class="w1">
                <div class="w1_1" v-for="it,i in the_data1" :key="i">
                    <div class="a1">
                        <img src="../../assets/img/b.png" alt="">
                        <span>65+</span>
                    </div>
                    <div class="a2">
                        <div class="a2_1">{{it.name}}</div>
                        <div class="a2_2">你的VS吗viOS {{it.title}}</div>
                        <div class="a2_3">{{it.time}}</div>
                    </div>
                    <img :src="it.img" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['the_data1'],
    data() {
        return {



            imgList: [
                'https://upload-bbs.mihoyo.com/upload/2022/03/30/5f1612a985b3c421e3298bc17618a43b.jpeg',
                'https://upload-bbs.mihoyo.com/upload/2022/04/29/3fe57965ed348966dd93dfaba28da0f6.jpeg',
                'https://upload-bbs.mihoyo.com/upload/2022/04/29/b20891f66c723d6c569c1e8f3447671e.jpeg',
                'https://upload-bbs.mihoyo.com/upload/2022/05/02/8ffeba1c742e7ef9d38a14c944f39872.jpeg',
                'https://upload-bbs.mihoyo.com/upload/2022/05/02/8ffeba1c742e7ef9d38a14c944f39872.jpeg'
                ],
            www: [
                '你好uacdfssf','不好吧','太好啦'
            ],
            imgList2: [
                'https://upload-bbs.mihoyo.com/pc_ad/pc_ad_ys_game_record2.jpg',
                'https://upload-bbs.mihoyo.com/upload/2022/03/29/d169c8353e5c428340f0bcac4b9e8b34_6854408165333802564.jpg',
                'https://upload-bbs.mihoyo.com/pc_ad/ys_signin.jpg'
            ],
            guangfang: [
                {name: '活动', title: '从你少女i发VS篇v你是否不顾i打不过打不过打不过跑环任务交割日无法'},
                {name: '资讯', title: '从你少女i发VS篇v你是否不顾i打不过打不过打不过跑环任务交割日无法'},
                {name: '资讯', title: '从你少女i发VS篇v你是否不顾i打不过打不过打不过跑环任务交割日无法'},
                {name: '公告', title: '从你少女i发VS篇v你是否不顾i打不过打不过打不过跑环任务交割日无法'},
                {name: '公告', title: '从你少女i发VS篇v你是否不顾i打不过打不过打不过跑环任务交割日无法'},
            ],
            tuia: [
                {img: 'https://upload-bbs.mihoyo.com/upload/2022/04/29/7078d15984ddbbb8aaa6280a9cb86407_5699639779014808393.gif?x-oss-process=image/auto-orient,0/interlace,1/format,jpg', na: '假日冒险？触发！'},
                {img: 'https://upload-bbs.mihoyo.com/upload/2022/04/29/7078d15984ddbbb8aaa6280a9cb86407_5699639779014808393.gif?x-oss-process=image/auto-orient,0/interlace,1/format,jpg', na: '假日冒险？触发！'},
                {img: 'https://upload-bbs.mihoyo.com/upload/2022/04/29/7078d15984ddbbb8aaa6280a9cb86407_5699639779014808393.gif?x-oss-process=image/auto-orient,0/interlace,1/format,jpg', na: '假日冒险？触发！'},
            ],
            usertuiji:[
                {img: 'https://upload-bbs.mihoyo.com/upload/2022/04/29/7078d15984ddbbb8aaa6280a9cb86407_5699639779014808393.gif?x-oss-process=image/auto-orient,0/interlace,1/format,jpg', name: '从你少女', dengji: 'Lv.9', title: '水泥厂你是v发'},
                {img: 'https://upload-bbs.mihoyo.com/upload/2022/04/29/7078d15984ddbbb8aaa6280a9cb86407_5699639779014808393.gif?x-oss-process=image/auto-orient,0/interlace,1/format,jpg', name: '从你少女i发VS篇v你是否不顾i打不过打不过打不过跑环任务交割日无法', dengji: 'Lv.9', title: '水泥厂你是v发'},
                {img: 'https://upload-bbs.mihoyo.com/upload/2022/04/29/7078d15984ddbbb8aaa6280a9cb86407_5699639779014808393.gif?x-oss-process=image/auto-orient,0/interlace,1/format,jpg', name: '从你', dengji: 'Lv.9', title: '水泥厂你是v发'},
                {img: 'https://upload-bbs.mihoyo.com/upload/2022/04/29/7078d15984ddbbb8aaa6280a9cb86407_5699639779014808393.gif?x-oss-process=image/auto-orient,0/interlace,1/format,jpg', name: '从你少女i发VS篇v你是否不顾i打不过打不过打不过跑环任务交割日无法', dengji: 'Lv.9', title: '水泥厂你是v发'},
            ],
            meiyutuijan: [
                {img: 'https://upload-bbs.mihoyo.com/upload/2022/04/22/22630933/e5e9e7ee01c8befb3e9d86149fbdb311_7405146438885921199.jpg', titl: 'dnisdnacfuivbf才能丢v发表VS吧v夫i欧冠我不够稳固货物发到就拿出来覅就覅我'},
                {img: 'https://upload-bbs.mihoyo.com/upload/2022/04/22/22630933/e5e9e7ee01c8befb3e9d86149fbdb311_7405146438885921199.jpg', titl: 'dnisdnacfuivbf才能丢v发表VS吧v夫i欧冠我不够稳固货物发到就拿出来覅就覅我'},
                {img: 'https://upload-bbs.mihoyo.com/upload/2022/04/22/22630933/e5e9e7ee01c8befb3e9d86149fbdb311_7405146438885921199.jpg', titl: 'dnisdnacfuivbf才能丢v发表VS吧v夫i欧冠我不够稳固货物发到就拿出来覅就覅我'},
            ]
        }
    }
}
</script>

<style lang="less" scoped>
    .index {
        width: 100%;
        display: flex;
        .w1 {
                // border: 1px solid red;
                width: 700px;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                // padding: 10px;
                .w1_1:hover {cursor: pointer;.a2_1{color: #00c3ff;}}
                .w1_1 {
                    border-bottom: 1px solid #999;
                    background-color: white;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 18px;
                    .a1 {
                        // border: 1px solid red;
                        height: 100%;
                        padding: 6px;
                        position: relative;
                        display: flex;
                        align-items: center;
                        // img {
                            // margin-top: 30px;
                        // }
                        span {
                            color: #45a5e5;
                            // border: 1px solid #45a5e5;
                            position: absolute;
                            display: flex;
                            align-items: center;
                            // justify-content: center;
                            margin-top: -5px;
                            // top: -10px;
                            // left: 0;
                            font-size: 10px;
                            padding: 3px;
                        }
                    }
                    .a2 {
                        // border: 1px solid red;
                        height: 100%;
                        padding: 5px;
                        .a2_1 {
                            // border: 1px solid red;
                            font-size: 16px;
                            font-weight: bolder;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            overflow: hidden;
                        }
                        .a2_2 {
                            color: #999;
                            font-size: 10px;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 3;
                            overflow: hidden;
                            margin-top: 3px;
                        }
                        .a2_3 {
                            color: #999;
                            font-size: 10px;
                            margin-top: 6px;
                        }
                    }
                    img {
                        max-width: 260px;
                        border-radius: 7px;
                        // padding: 6px;
                    }
                }
        }
    }
</style>